<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()

const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入新的密码'))
    } else {
        if (ruleForm.checkPass !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('checkPass')
        }
        callback()
    }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入确认密码！'))
    } else if (value !== ruleForm.newpass) {
        callback(new Error("确认密码与新密码不一致！"))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    oldpass: '',
    newpass:'',
    checkPass: '',

})
const rules = reactive<FormRules<typeof ruleForm>>({
    oldpass: [{ required: true, message:'请输入旧密码',trigger: 'blur' }],
    newpass:[{ required: true,validator: validatePass, trigger: 'blur' }],
    checkPass: [{ required: true,validator: validatePass2, trigger: 'blur' }],
})
import {admUpdatePwdService} from '@/api/adm/adm.js'
import { ElMessage } from 'element-plus';
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
        update()
    } else {
      console.log('error submit!')
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
const update=()=>{
    let params={
            oldPwd:ruleForm.oldpass,
            newPwd:ruleForm.newpass,
            checkPwd:ruleForm.checkPass
        }
    let result= admUpdatePwdService(params)
}
</script setup>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>修改密码</span>
            </div>
        </template>
        <el-row>
            <el-col :span="12">
                <el-form label-width="100px" size="large" ref="ruleFormRef" style="max-width: 600px" :model="ruleForm"
                    status-icon :rules="rules" class="demo-ruleForm">
                    <el-form-item label="旧密码" prop="oldpass">
                        <el-input v-model="ruleForm.oldpass" type="password" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="新密码" prop="newpass">
                        <el-input v-model="ruleForm.newpass" type="password" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
                    </el-form-item>     
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">
                            提交修改
                        </el-button>
                        <el-button @click="resetForm(ruleFormRef)">清空</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>